import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import {
  changeComponentHidden,
  copyComponent,
  deleteComponent,
  moveComponent,
  pasteComponent,
  toggleComponentLock,
} from "@/store/componentsReducer";
import {
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  RedoOutlined,
  SnippetsOutlined,
  UndoOutlined,
  UpOutlined,
} from "@ant-design/icons";
import { Space, Button, Tooltip } from "antd";
import { FC } from "react";
import { useDispatch } from "react-redux";
import { ActionCreators } from "redux-undo";

const EditToolBar: FC = () => {
  const dispatch = useDispatch();
  const { selectedId, componentList, selectedComponent, copiedComponent } =
    useGetComponentInfo();
  const { isLocked } = selectedComponent || {};
  const selectedIndex = componentList.findIndex((c) => c.fe_id === selectedId);

  const handleDelete = () => {
    dispatch(deleteComponent());
  };

  const handleHidden = () => {
    dispatch(
      changeComponentHidden({
        fe_id: selectedId,
        isHidden: true,
      })
    );
  };

  const handleLock = () => {
    dispatch(
      toggleComponentLock({
        fe_id: selectedId,
      })
    );
  };

  const handleCopy = () => {
    dispatch(copyComponent());
  };

  const handlePaste = () => {
    dispatch(pasteComponent());
  };

  // 上移下移
  const handleMoveUp = () => {
    dispatch(
      moveComponent({
        oldIndex: selectedIndex,
        newIndex: selectedIndex - 1,
      })
    );
  };
  const handleMoveDown = () => {
    dispatch(
      moveComponent({
        oldIndex: selectedIndex,
        newIndex: selectedIndex + 1,
      })
    );
  };

  const undo = () => {
    dispatch(ActionCreators.undo());
  };

  const redo = () => {
    dispatch(ActionCreators.redo());
  };

  return (
    <Space>
      <Tooltip title="删除">
        <Button
          shape="circle"
          icon={<DeleteOutlined />}
          onClick={handleDelete}
        ></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button
          shape="circle"
          icon={<EyeInvisibleOutlined />}
          onClick={handleHidden}
        ></Button>
      </Tooltip>
      <Tooltip title={isLocked ? "解锁" : "锁定"}>
        <Button
          type={isLocked ? "primary" : "default"}
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLock}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button
          shape="circle"
          icon={<CopyOutlined />}
          onClick={handleCopy}
        ></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          disabled={!copiedComponent}
          shape="circle"
          icon={<SnippetsOutlined />}
          onClick={handlePaste}
        ></Button>
      </Tooltip>
      <Tooltip title="上移">
        <Button
          disabled={selectedIndex <= 0}
          shape="circle"
          icon={<UpOutlined />}
          onClick={handleMoveUp}
        ></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          disabled={selectedIndex >= componentList.length - 1}
          shape="circle"
          icon={<DownOutlined />}
          onClick={handleMoveDown}
        ></Button>
      </Tooltip>
      <Tooltip title="撤销">
        <Button
          // disabled={}
          shape="circle"
          icon={<UndoOutlined />}
          onClick={undo}
        ></Button>
      </Tooltip>
      <Tooltip title="重做">
        <Button
          // disabled={}
          shape="circle"
          icon={<RedoOutlined />}
          onClick={redo}
        ></Button>
      </Tooltip>
    </Space>
  );
};

export default EditToolBar;
